<template>
    <div>
        <div :id="id" :style="{ width: width + 'px', height: height + 'px' }"></div>
        <div class="title">{{ title }}</div>
    </div>
</template>
  
<script setup name="Pie">
import * as echarts from "echarts";
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
// 主题颜色
const theme = computed(() => settingsStore.theme);

const props = defineProps({
    id: {
        default: ''
    },
    value: {
        default: 0,
        type: Number
    },
    width: {
        default: 200,
        type: Number
    },
    height: {
        default: 200,
        type: Number
    },
    title: {
        default: '',
        type: String
    }
})



const width = ref(props.width)
const height = ref(props.height)

const symbolPath = 'path://M640 625.6V192c0-70.592-57.408-128-128-128s-128 57.408-128 128v433.6c-40.192 36.096-64 87.872-64 142.4 0 105.92 86.08 192 192 192s192-86.08 192-192c0-54.592-23.808-106.368-64-142.4zM512 896a128 128 0 0 1-128-128c0-47.36 25.92-88.128 64-110.272V544h32V512H448V448h64v-32H448v-64h32V320H448V256h64v-32H448V192a63.936 63.936 0 1 1 128 0v465.728c38.08 22.144 64 62.976 64 110.272a128 128 0 0 1-128 128z'

const theMax = 100;
const labelSetting = {
    show: true,
    position: 'top',
    offset: [0, -5],
    formatter: function (param) {
        return param.value + '℃'
    },
    fontSize: 18,
    fontFamily: 'Arial'
};

let chart = null
watch(() => {
    return props.value;
}, (newValue, oldValue) => {
    if (chart) {
        chart.setOption({
            series: [{
                data: [
                    {
                        value: newValue, 
                        symbol: symbolPath
                    }
                ]
            }]
        })
    } else {
        initChart()
    }
}, { immediate: true, deep: true });

onMounted(() => {
    nextTick(() => {
        initChart()
    })
})


function initChart() {
    let dom = document.getElementById(props.id)
    if (!dom) return
    chart = echarts.init(document.getElementById(props.id), "purple-passion");
    chart.setOption({
        xAxis: {
            data: ['温度'],
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false }
        },
        yAxis: {
            show: false,
            max: theMax,
            offset: 20,
        },
        grid: {
            top: 40,
            bottom: 20,
            left: 'center',
            height: 'auto',
            width: 120
        },
        series: [
            {
                type: 'pictorialBar',
                symbolClip: true,
                symbolBoundingData: theMax,
                label: labelSetting,
                itemStyle: {
                    color: theme.value
                },
                data: [
                    {
                        value: props.value,
                        symbol: symbolPath
                    }
                ],
                z: 10
            },
            {
                type: 'pictorialBar',
                symbolBoundingData: theMax,
                animationDuration: 0,
                itemStyle: {
                    color: '#ddd'
                },
                data: [
                    {
                        value: props.value,
                        symbol: symbolPath
                    }
                ],
            }
        ]
    });
    window.onresize = function () {
        chart.resize();
    };
}


</script>
  
<style scoped lang="scss">
.title {
    text-align: center;
}
</style>
  
  